﻿
@{
    ViewBag.Title = "MoBanPage";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row" id="app">
    <div class="col-xs-12">
        <div class="row" id="list">
            <div class="col-xs-12">

                <form class="form-search">
                    <div class="row">
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group input-group-lg">
                                <span class="input-group-addon">
                                    <i class="ace-icon fa fa-check"></i>
                                </span>

                                <input type="text" class="form-control search-query" placeholder="" v-model="keyword" />
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default btn-lg" v-on:click="p_GetSearch()">
                                        <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                        Search
                                    </button>
                                </span>
                            </div>
                            <div class="hr"></div>
                        </div>
                    </div>
                </form>
                <button class="btn btn-sm btn-info " v-on:click="p_popMoBan()">
                    <i class="ace-icon glyphicon glyphicon-plus bigger-110"></i>
                    <span class="bigger-110 no-text-shadow">添加模板</span>
                </button>
                <div class="hr"></div>
                <table id="simple-table" class="table  table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th class="center">模板名称</th>
                            <th>模板类型</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>创建人</th>
                            <th>操作</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="(tr,index) in mobanlist">
                            <td>
                                {{index+1}}
                            </td>
                            <td class="center">
                                {{tr.mbmc}}
                            </td>
                            <td>
                                {{tr.mbtypename}}
                            </td>
                            <td>
                                <template v-if="tr.isuse">
                                    可用
                                </template>
                                <template v-if="!tr.isuse">
                                    禁用
                                </template>
                            </td>
                            <td>
                                {{tr.cjsj}}
                            </td>
                            <td>
                                {{tr.XingMing}}
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-primary" v-on:click="p_ShowEditPage(tr)">编辑</button>

                                    <button data-toggle="dropdown" class="btn btn-sm btn-primary dropdown-toggle">
                                        <i class="ace-icon fa fa-angle-down icon-only"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-yellow">
                                        <li>
                                            <a href="javascript:void(0)" v-on:click="p_ShowEditPage(tr)">编辑</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li>
                                            <a href="javascript:void(0)" v-on:click="p_DelMoBan(tr.mbid)">删除</a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="row" id="info" style="display: none">
            <div class="col-lg-12">
                <div class="page-header">
                    <h1>
                        {{moban.mbmc}}
                        <button class="btn btn-sm btn-info " v-on:click="p_PathAdd()">
                            <i class="ace-icon glyphicon glyphicon-plus bigger-110"></i>
                            <span class="bigger-110 no-text-shadow">添加下级</span>
                        </button>
                        <button class="btn btn-sm" v-on:click="p_ShowMoBanList()">
                            <i class="ace-icon fa fa-reply icon-only bigger-110"></i>
                            返回
                        </button>
                    </h1>
                    <div class="hr"></div>
                    <template v-for="(path,pi) in moban.MoBan_Paths">
                        <table class="table  table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>顺序</th>
                                    <th>名称</th>
                                    <th>默认控件</th>
                                    <th>分值</th>
                                    <th>下级内容是否可编辑</th>
                                    <th>关联表</th>
                                    <th style="width: 115px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="width: 100px">
                                        <input type="text" placeholder="顺序" class="form-control" v-model="path.shunxu">
                                    </td>
                                    <td style="width: 500px">
                                        <input type="text" placeholder="名称" class="form-control" v-model="path.ljmc">
                                    </td>
                                    <td style="width: 110px">
                                        <select class="form-control" v-model="path.ControlID">
                                            <option v-for="option in controllist" v-bind:value="option.id"> {{ option.controlname }}</option>
                                        </select>
                                    </td>
                                    <td style="width: 100px">
                                        <input type="text" placeholder="分值" class="form-control" v-model="path.fenzhi">
                                    </td>
                                    <td style="width: 150px">
                                        <input type="checkbox" v-model="path.isedit" name="checkbox" />
                                    </td>
                                    <td>
                                        <template v-if="path.isinclude">
                                            {{path.SonMoBanMain.mbmc}}
                                        </template>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <button class="btn btn-sm btn-primary" v-on:click="p_PathUpdate(path)">更新目录</button>

                                            <button data-toggle="dropdown" class="btn btn-sm btn-primary dropdown-toggle">
                                                <i class="ace-icon fa fa-angle-down icon-only"></i>
                                            </button>

                                            <ul class="dropdown-menu dropdown-yellow">

                                                <li v-if="!path.isinclude">
                                                    <a href="javascript:void(0)" v-on:click="p_ContentAdd(path)">添加内容</a>
                                                </li>
                                                <li v-if="!path.isinclude">
                                                    <a href="javascript:void(0)" v-on:click="p_ShowOtherMoBan(pi)">关联其它表</a>
                                                </li>
                                                <li v-if="path.isinclude">
                                                    <a href="javascript:void(0)" v-on:click="p_CancelRelation(path)">取消关联</a>
                                                </li>

                                                <li class="divider"></li>
                                                <li>
                                                    <a href="javascript:void(0)" v-on:click="p_PathDel(pi,path.ljid)">删除</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <template v-for="(content,ci) in path.MoBan_Contents">
                                    <tr class="detail-row open">
                                        <td colspan="7">
                                            <div class="table-detail">
                                                <div class="row">
                                                    <div class="col-xs-12">
                                                        <p>
                                                            <span class="label label-sm label-primary arrowed arrowed-right">包含内容</span>
                                                        </p>
                                                        <table class="table  table-bordered table-hover">
                                                            <thead>
                                                                <tr>
                                                                    <th>顺序</th>
                                                                    <th>内容</th>
                                                                    <th>分值</th>
                                                                    <th>控件</th>
                                                                    <th>答案集</th>
                                                                    <th style="width: 115px;"></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td style="width: 100px">
                                                                        <input type="text" placeholder="顺序" class="form-control" v-model="content.shunxu">
                                                                    </td>
                                                                    <td style="width: 250px">
                                                                        <textarea class="form-control" placeholder="内容" v-model="content.nr"></textarea>
                                                                    </td>
                                                                    <td style="width: 100px">
                                                                        <input type="text" placeholder="分值" class="form-control" v-model="content.fenzhi">
                                                                    </td>
                                                                    <td style="width: 110px">
                                                                        <select class="form-control" v-model="content.ControlID">
                                                                            <option v-for="option in controllist" v-bind:value="option.id"> {{ option.controlname }}</option>
                                                                        </select>
                                                                    </td>
                                                                    <td>
                                                                        <table class="table  table-bordered table-hover">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>
                                                                                        顺序
                                                                                    </th>
                                                                                    <th>
                                                                                        提示
                                                                                    </th>
                                                                                    <th>
                                                                                        分值
                                                                                    </th>
                                                                                    <th style="width: 115px;">

                                                                                    </th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                <tr v-for="(answer,ai) in content.MoBan_Answers">
                                                                                    <td style="width: 100px">
                                                                                        <input type="text" placeholder="顺序" class="form-control" v-model="answer.shunxu">
                                                                                    </td>
                                                                                    <td style="width: 100px">
                                                                                        <input type="text" placeholder="提示" class="form-control" v-model="answer.tips">
                                                                                    </td>
                                                                                    <td style="width: 100px">
                                                                                        <input type="text" placeholder="分值" class="form-control" v-model="answer.fenzhi">
                                                                                    </td>
                                                                                    <td style="width: 100px">
                                                                                        <div class="btn-group">
                                                                                            <button class="btn btn-sm btn-primary" v-on:click="p_AnswerUpdate(answer,content.nrid,path.ljid)">更新选项</button>

                                                                                            <button data-toggle="dropdown" class="btn btn-sm btn-primary dropdown-toggle">
                                                                                                <i class="ace-icon fa fa-angle-down icon-only"></i>
                                                                                            </button>

                                                                                            <ul class="dropdown-menu dropdown-yellow">
                                                                                                <li>
                                                                                                    <a href="javascript:void(0)" v-on:click="p_AnswerDel(content,ai,path.ljid,answer.aid)">删除</a>
                                                                                                </li>
                                                                                            </ul>
                                                                                        </div>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </td>
                                                                    <td>
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-sm btn-primary" v-on:click="p_ContentUpdate(content,path.ljid)">更新内容</button>

                                                                            <button data-toggle="dropdown" class="btn btn-sm btn-primary dropdown-toggle">
                                                                                <i class="ace-icon fa fa-angle-down icon-only"></i>
                                                                            </button>

                                                                            <ul class="dropdown-menu dropdown-yellow">
                                                                                <li>
                                                                                    <a href="javascript:void(0)" v-on:click="p_AnswerAdd(content)">添加选项</a>
                                                                                </li>
                                                                                <li class="divider"></li>
                                                                                <li>
                                                                                    <a href="javascript:void(0)" v-on:click="p_ContentDel(path,ci,content.nrid)">删除</a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </template>
                </div>
            </div>
        </div>

        <!--添加模板-->
        <div id="dialog-confirm" class="hide">
            <form class="form-horizontal" role="form">
                <!-- #section:elements.form -->
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 模板名称 </label>

                    <div class="col-sm-9">
                        <input type="text" id="form-field-1" placeholder="模板名称" class="col-xs-12" v-model="moban.mbmc" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 模板类型 </label>
                    <div class="col-sm-9">
                        <select class="form-control" v-model="moban.mbtype">
                            <option v-for="option in mobantype" v-bind:value="option.key"> {{ option.value }}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> </label>
                    <div class="col-xs-9">
                        <label>
                            <input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox" v-model="moban.isuse" />
                            <span class="lbl">是否启用</span>
                        </label>
                    </div>
                </div>

                <div class="space-24"></div>
            </form>
        </div><!-- #添加模板 -->
        <!--关联模板-->
        <div id="dialog-Moban" class="hide">
            <div class="row">
                <div class="col-lg-12">
                    <table id="simple-table" class="table  table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="center">
                                    模板名
                                </th>
                                <th>模板类型</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="(tr,i) in othermobanlist">
                                <td class="center">
                                    {{tr.mbmc}}
                                </td>
                                <td class="center">
                                    {{tr.mbtype}}
                                </td>
                                <td>
                                    <button class="btn btn-xs btn-success" v-on:click="p_SelectThisMoBan(tr)">
                                        <i class="ace-icon fa fa-check bigger-120"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div><!-- #关联模板 -->
    </div><!-- /.span -->
</div><!-- /.row -->
<script src="~/Scripts/JsModel/MoBan/MoBan_Model.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            mobanlist: [],
            controllist: [],
            keyword: "",
            moban: new MoBan_Main(),
            mobantype: [],
            othermobanlist: [],
            mobanpathindex:-1
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                var me = this;
                axios.all([me.p_GetMoBanList(), me.p_GetControlList(), me.p_GetMoBanType()])
                    .then(axios.spread(function() {

                    }));
                if ($('.ace-switch-6').prop("checked")) {
                } else {
                    $('.ace-switch-6').prop("checked", true);
                }
            },
            p_SaveMoBan_Main: function() {
                if ($('.ace-switch-6').prop("checked")) {
                    this.moban.isuse = true;
                } else {
                    this.moban.isuse = false;
                }
                var _self = this;
                axios.post('@Url.Action("SaveMoBan_Main", "MoBanConfig")', _self.moban).then(
                        function (response) {
                        _self.p_GetMoBanList();
                        },
                        function(response) {
                            //alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            //alert(error);
                        }
                    );
            },
            p_GetMoBanList: function() { //获取模板列表
                var _self = this;
                $.showloading();
                axios.post('@Url.Action("GetMoBanList", "MoBanConfig")').then(
                    function (response) {
                        _self.mobanlist = [];
                            for (var i = 0; i < response.data.length; i++) {
                                _self.mobanlist.push(response.data[i]);
                            }
                        $.closeloading();
                        },
                        function(response) {
                            //alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            //alert(error);
                        }
                    );
            },
            p_GetSearch: function() {
                var _self = this;
                axios.get('@Url.Action("GetSearchMoBanList", "MoBanConfig")', { params: { keyword: _self.keyword } }).then(
                    function (response) {
                        _self.mobanlist = [];
                            for (var i = 0; i < response.data.length; i++) {
                                _self.mobanlist.push(response.data[i]);

                            }
                            console.log(_self.mobanlist);
                        },
                        function(response) {
                            //alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            //alert(error);
                        }
                    );
            },
            p_GetControlList: function() { //获取控件集
                var _self = this;
                axios.get("@Url.Action("GetControlList", "MoBanConfig")").then((response) => {
                    _self.controllist = [];
                        for (var i = 0; i < response.data.length; i++) {
                            _self.controllist.push(response.data[i]);

                    }
                        console.log(_self.controllist);
                    },
                    (response) => {

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            },
            p_popMoBan() {
                var _self = this;
                $( "#dialog-confirm" ).removeClass('hide').dialog({
                    resizable: false,
                    width: '500',
                    modal: true,
                    title: "添加模板",
                    title_html: true,
                    buttons: [
                        {
                            html: "<i class='ace-icon glyphicon glyphicon-ok bigger-110'></i>&nbsp; 保存",
                            "class": "btn btn-success btn-minier",
                            click: function () {
                                _self.p_SaveMoBan_Main();
                                $( this ).dialog( "close" );
                            }
                        }
                        ,
                        {
                            html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 取消",
                            "class" : "btn btn-minier",
                            click: function () {

                                $( this ).dialog( "close" );
                            }
                        }
                    ]
                });
            },
            p_GetMoBanType: function() {
                var _self = this;
                axios.get("@Url.Action("GetMoBanType", "MoBanConfig")").then((response) => {
                        _self.mobantype = [];
                        for (var i in response.data)
                        {
                        _self.mobantype.push({ "key": response.data[i], "value": i });
                        }
                    console.log(_self.mobantype);
                    },
                    (response) => {

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            },//获取模板类型
            p_DelMoBan(mbid) {
                var _self = this;
                bootbox.confirm("你确定这个操作吗?",
                    function(result) {
                        if (result) {
                            axios.get("@Url.Action("DelMoBan", "MoBanConfig")", { params: { mbid: mbid } }).then((response) => {
                                    var index = -1;
                                    $(_self.mobanlist).each(function(i, item) {
                                        if (item.mbid == mbid) {
                                            index = i;
                                            return false;
                                        }
                                    });
                                    if (index > 0) {
                                        _self.mobanlist.splice(index, 1);
                                    }
                                },
                                (response) => {

                                }
                            ).catch(function(response) {
                                console.log(response);
                            });
                        }
                    });
            },//删除模板
            p_ShowEditPage(obj) {
                var _self = this;
                _self.moban = new MoBan_Main(obj);
                $("#list").hide(function () {$("#info").show()});
            },//显示编辑页面
            p_ShowMoBanList() {
                var _self = this;
                _self.moban = new MoBan_Main();
                $("#info").hide(function () { $("#list").show() });
                _self.p_GetMoBanList();
            },
            p_PathAdd() {
                var _self = this;
                _self.moban.MoBan_Paths.push(new MoBan_Path());
            },//添加路径
            p_PathDel(index, ljid) {
                var _self = this;
                bootbox.confirm("你确定这个操作吗?",
                    function(result) {
                        if (result) {
                            if (ljid > 0) {
                                axios.get("@Url.Action("PathDel", "MoBanConfig")",
                                    { params: { mbid: _self.moban.mbid, ljid: ljid } }).then((response) => {
                                        _self.moban.MoBan_Paths.splice(index, 1);
                                    },
                                    (response) => {

                                    }
                                ).catch(function(response) {
                                    console.log(response);
                                });
                            } else {
                                _self.moban.MoBan_Paths.splice(index, 1);
                            }
                        }
                    });
            },
            p_PathUpdate(obj) {
                $.showloading();
                var _self = this;
                axios.post('@Url.Action("PathUpdate", "MoBanConfig")', { model: obj,mbid:_self.moban.mbid}).then(
                        function (response) {
                            obj.ljid = response.data;
                            $.closeloading();
                        },
                        function(response) {
                            //alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            //alert(error);
                        }
                    );
            },
            p_ContentAdd(obj) {
                obj.MoBan_Contents.push(new MoBan_Content());
            },//添加内容
            p_ContentDel(obj, index,nrid) {
                var _self = this;
                bootbox.confirm("你确定这个操作吗?",
                    function(result) {
                        if (result) {
                            if (nrid > 0) {
                                axios.get("@Url.Action("ContentDel", "MoBanConfig")",
                                    { params: { mbid: _self.moban.mbid, ljid: obj.ljid, nrid: nrid } }).then(
                                    (response) => {
                                        obj.MoBan_Contents.splice(index, 1);
                                    },
                                    (response) => {

                                    }
                                ).catch(function(response) {
                                    console.log(response);
                                });
                            } else {
                                obj.MoBan_Contents.splice(index, 1);
                            }

                        }
                    });
            },//删除
            p_ContentUpdate(obj, ljid) {
                $.showloading();
                var _self = this;
                axios.post('@Url.Action("ContentUpdate", "MoBanConfig")', { model: obj,mbid:_self.moban.mbid,ljid:ljid}).then(
                        function (response) {
                            obj.nrid = response.data;
                            $.closeloading();
                        },
                        function(response) {
                            //alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            //alert(error);
                        }
                    );
            },
            p_AnswerAdd(obj) {
                obj.MoBan_Answers.push(new MoBan_Answer());
            },
            p_AnswerDel(obj, index, ljid,answerid) {
                var _self = this;
                bootbox.confirm("你确定这个操作吗?",
                    function(result) {
                        if (result) {
                            if (answerid > 0) {
                                axios.get("@Url.Action("AnswerDel", "MoBanConfig")",
                                    {
                                        params: {
                                            mbid: _self.moban.mbid,
                                            ljid: ljid,
                                            nrid: obj.nrid,
                                            answerid: answerid
                                        }
                                    }).then((response) => {
                                        obj.MoBan_Answers.splice(index, 1);
                                    },
                                    (response) => {

                                    }
                                ).catch(function(response) {
                                    console.log(response);
                                });
                            } else {
                                obj.MoBan_Answers.splice(index, 1);
                            }

                        }
                    });

            },
            p_AnswerUpdate(obj,nrid,ljid) {
                $.showloading();
                var _self = this;
                //var html = "";
                //$(_self.controllist).each(function(i,item) {

                //});
                //obj.html
                axios.post('@Url.Action("AnswerUpdate", "MoBanConfig")', { model: obj,mbid:_self.moban.mbid,ljid:ljid,nrid:nrid}).then(
                        function (response) {
                            obj.aid = response.data;
                            $.closeloading();
                        },
                        function(response) {
                            //alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            //alert(error);
                        }
                    );
            },
            p_ShowOtherMoBan(index) {
                var _self = this;
                _self.mobanpathindex = index;
                $( "#dialog-Moban" ).removeClass('hide').dialog({
                    resizable: false,
                    width: '500',
                    modal: true,
                    title: "选择关联模板",
                    title_html: true,
                    buttons: [

                    ]
                });
                $.showloading();
                axios.get('@Url.Action("GetExceptMySelfMoBan", "MoBanConfig")', { params: { mbid: _self.moban.mbid } }).then(
                        function (response) {
                        _self.othermobanlist = [];
                            for (var i = 0; i < response.data.length; i++) {
                                _self.othermobanlist.push(response.data[i]);
                            }
                            $.closeloading();
                        },
                        function(response) {
                            //alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            //alert(error);
                        }
                    );
            },
            p_SelectThisMoBan(obj) {
                var _self = this;
                _self.moban.MoBan_Paths[_self.mobanpathindex].isinclude = true;
                _self.moban.MoBan_Paths[_self.mobanpathindex].SonMoBanMain = obj;
                _self.moban.MoBan_Paths[_self.mobanpathindex].MoBan_Contents = [];
                $("#dialog-Moban").dialog("close");

            },
            p_CancelRelation(obj) {
                obj.isinclude = false;
                obj.SonMoBanMain = new MoBan_Main();
            }

        }
    });
</script>